<%--
  Created by IntelliJ IDEA.
  User: 于永祥
  Date: 2022/10/14
  Time: 14:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<!doctype html>
<html lang="en" class="pxp-root">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="shortcut icon" href="/static/web/images/favicon.png" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700&display=swap" rel="stylesheet">
    <link href="/static/web/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/web/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="/static/web/css/animate.css">
    <link rel="stylesheet" href="/static/web/css/style.css">
    <script type="text/javascript" src="/static/web/js/jquery-3.3.1.min.js"></script>

    <title>万码招聘 - 忘记密码？</title>
</head>

<script type="text/javascript">
    $(function (){
        //修改密码
        $("#myform").submit(changePassword);

        //验证手机号
        $("#memPhone").blur(verifyPhone);
        //验证密码
        $("#password").blur(verifyPassword);
        //确认密码
        $("#confirmPassword").blur(confirmPassword);
        //显示确认密码
        $(".confirmPasswordTip").click(function (){
            if($("#confirmPassword").attr("type")=="password"){
                $("#confirmPassword").prop("type","text");
            }
            else {
                $("#confirmPassword").prop("type","password");
            }
        });
        //验证短信验证码
        $("#SMS-verifyCode").blur(verifySMS);
        //发送验证码之前，验证账号是否以注册
        $("#sendBtn").click(verifySignUp);
        //获取短信验证码
        $("#sendBtn").click(sendCode);
        //显示密码
        $(".passTips").click(function (){
            if($("#password").attr("type")=="password"){
                $("#password").prop("type","text");
            }
            else {
                $("#password").prop("type","password");
            }
        });
    });

    function changePassword(){
        return verifyPhone()&&verifyPassword()&&verifySMS();
    }

    function confirmPassword(){
        if($("#confirmPassword").val()==""){
            $(".confirmPasswordTips").html("请确认密码!");
            $(".confirmPasswordTips").css("color","red");
            return false;
        }
        else{
            if($("#confirmPassword").val()==$("#password").val()){
                $(".confirmPasswordTips").html("√");
                $(".confirmPasswordTips").css("color","blue");
                return true;
            }
            else {
                $(".confirmPasswordTips").html("密码输入不一致!");
                $(".confirmPasswordTips").css("color","red");
                return false;
            }
        }
    }

    function verifyPhone(){
        if($("#memPhone").val() == ""){
            $(".phoneTips").html("请输入手机号!");
            $(".phoneTips").css("color","red");
            return false;
        }
        $(".phoneTips").html("√");
        $(".phoneTips").css("color","blue");
        return true;
    }

    function verifyPassword(){
        var reg = /^[a-zA-Z0-9_-]{5,11}$/;
        if($("#password").val() == ""){
            $(".passwordTips").html("请输入密码!");
            $(".passwordTips").css("color","red");
            return false;
        }
        else if (!reg.test($("#password").val())){
            $(".passwordTips").html("密码格式有误!");
            $(".passwordTips").css("color","red");
            return false;
        }
        $(".passwordTips").html("√");
        $(".passwordTips").css("color","blue");
        return true;
    }

    //验证短信验证码
    function verifySMS(){
        var code;
        var sms = $("#SMS-verifyCode").val();
        $.ajax({
            url:"/getCode",
            type:"post",
            async:false,
            success:function (mes){
                code = mes;
            }
        });
        if(sms==""){
            $(".SMS-verifyCodeTips").html("请输入短信验证码!");
            $(".SMS-verifyCodeTips").css("color","red");
            return false;
        }
        if(code==sms){
            $(".SMS-verifyCodeTips").html("√");
            $(".SMS-verifyCodeTips").css("color","blue");
            return true;
        }
        else {
            $(".SMS-verifyCodeTips").html("验证码有误!");
            $(".SMS-verifyCodeTips").css("color","red");
            return true;
        }
    }

    //发送短信验证码之前，验证账号是否注册
    function verifySignUp(){
        var Mes;
        var memPhone = $("#memPhone").val();
        $.ajax({
            url:"/web/verifySignUp",
            data:{
                memPhone:memPhone
            },
            async: false,
            success:function (mes){
                Mes = mes;
            }
        });
        if(Mes=="true"){
            $(".phoneTips").html("√");
            $(".phoneTips").css("color","blue");
            return true;
        }
        else {
            $(".phoneTips").html("该手机号未注册!");
            $(".phoneTips").css("color","red");
            return false;
        }
    }

    //发送短信验证码
    function sendCode(){
        var memPhone = $("#memPhone").val();
        if(memPhone == "" || memPhone.length != 11){
            $(".phoneTips").html("请确认手机号是否有误!");
            $(".phoneTips").css("color","red");
            return false;
        }
        else{
            if(verifySignUp()){
                $.ajax({
                    type: 'get',
                    url: '/sendCode',
                    data: {
                        memPhone : memPhone,
                    },
                    dataType: 'json',
                    success: function(data) {
                        if(data){
                            //倒计时
                            timer();
                        }else{
                            $(".SMS-verifyCodeTips").html("获取验证码失败!");
                            $(".SMS-verifyCodeTips").css("color","red");
                            return false;
                        }
                    },
                    error: function() {
                        $(".SMS-verifyCodeTips").html("连接超时!");
                        $(".SMS-verifyCodeTips").css("color","red");
                        return false;
                    },
                });
            }
        }
    }
    var wait = 60;
    //倒计时
    function timer() {
        if(wait == 0){
            $("#sendBtn").val("获取验证码");
            $("#sendBtn").removeAttr("disabled");
            $("#sendBtn").css("border-color","1e9fff").css("background", "#ffffff").css("cursor", "pointer");
            wait = 60;
        }else{
            $("#sendBtn").attr("disabled","true");
            $("#sendBtn").css("border-color","fbfbfb").css("background", "#ccc").css("cursor", "not-allowed");
            $("#sendBtn").val(wait + "秒后重发");
            wait--;
            setTimeout(function() {timer()}, 1000);
        }
    }
</script>

<body>
<div class="pxp-preloader"><span>Loading...</span></div>

<!--Head-->
<jsp:include page="/web/personal/inc/personalSignUpHead"/>

<section class="pxp-hero vh-100" style="background-color: var(--pxpMainColorLight);">
    <div class="row align-items-center pxp-sign-hero-container">
        <div class="col-xl-6 pxp-column">
            <div class="pxp-sign-hero-fig text-center pb-100 pt-100">
                <img src="/static/web/images/signin-big-fig.png" alt="Sign In">
                <h1 class="mt-4 mt-lg-5">忘记密码</h1>
            </div>
        </div>
        <div class="col-xl-6 pxp-column pxp-is-light">
            <div class="pxp-sign-hero-form pb-100 pt-100">
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-xl-7 col-xxl-5">
                        <div class="pxp-sign-hero-form-content">
                            <h5 class="text-center">修改</h5>
                            <form id="myform" method="post" action="/web/changePassword" class="mt-4">
                                <div style="margin-top: -20px;">
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;" class="phoneTips"></span>
                                    <div class="form-floating mb-3">
                                        <input id="memPhone" name="phone" type="text" class="form-control" placeholder="phone">
                                        <label style="font-weight: bold;" for="memPhone">手机号</label>
                                        <span class="fa fa-envelope-o"></span>
                                    </div>
                                </div>

                                <div style="margin-top: -20px;">
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;" class="passwordTips"></span>
                                    <div class="form-floating mb-3">
                                        <input id="password" name="pass" type="password" class="form-control" placeholder="Password">
                                        <label style="font-weight: bold;" for="password">密码</label>
                                        <span class="fa fa-lock passTips"></span>
                                    </div>
                                </div>

                                <div style="margin-top: -20px;">
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;" class="confirmPasswordTips"></span>
                                    <div class="form-floating mb-3">
                                        <input id="confirmPassword" name="confirmPassword" type="password" class="form-control" placeholder="confirmPassword">
                                        <label style="font-weight: bold;" for="confirmPassword">确认密码</label>
                                        <span class="fa fa-lock confirmPasswordTip"></span>
                                    </div>
                                </div>

                                <div style="margin-top: -20px;">
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;" class="SMS-verifyCodeTips"></span>
                                    <div class="form-floating mb-3">
                                        <input name="SMS-verifyCode" type="text" class="form-control" id="SMS-verifyCode" placeholder="SMS-verifyCode">
                                        <label for="SMS-verifyCode" style="font-weight: bold;">短信验证码</label>
                                        <span class="fa fa-envelope-o"></span>
                                    </div>
                                    <input id="sendBtn" class="btn" type="button" value="获取验证码" style="pointer-events:auto;margin-left: 185px;color: black;font-size: 10px;font-weight: bold;"/>
                                </div>
                                <input style="margin-top: 10px;width: 285px;" type="submit" value="确认" class="btn rounded-pill pxp-sign-hero-form-cta">
                                <div class="mt-4 text-center pxp-sign-hero-form-small">
                                    <a style="font-weight: bold;" href="javascript:void(0)"></a>
                                </div>
                                <div class="mt-4 text-center pxp-sign-hero-form-small">
                                    <a style="font-weight: bold;" href="/web/personal/login">密码登录？</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script src="/static/web/js/jquery-3.4.1.min.js"></script>
<script src="/static/web/js/bootstrap.bundle.min.js"></script>
<script src="/static/web/js/owl.carousel.min.js"></script>
<script src="/static/web/js/nav.js"></script>
<script src="/static/web/js/main.js"></script>
</body>
</html>

